<template>
  <div id="app" style="margin:0;padding:0;border:0;">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem('CurUser'))
    };
  },
  watch: {//用于观察和响应数据变化的属性
//     首次加载应用：当页面首次加载时，$store.state.menu 的初始值可能是 null 或 undefined，
//     而这段 watch 代码会确保只要 menu 发生首次设置且 user 存在，就会提交 menu 数据到 Vuex。
//     当用户已登录，页面刷新后 sessionStorage 中还有用户信息，这段 watch 代码可以帮助初始化 menu，即便没有触发登录流程
//     不会作用于重新登录流程，在重新登录的场景中，由于用户信息和菜单是主动通过登录逻辑设置的（而不是由 watch 监听 menu 的变化）
    '$store.state.menu': {
      handler(val, old) {
        // val 是 $store.state.menu 的新值
        // old 是 $store.state.menu 的旧值
        //watch 的回调，当 $store.state.menu 发生变化时触发
        if (!old && this.user && this.user.no) {
          this.$store.commit("setMenu", val)
        }
      },
      immediate: true
      // 当您刷新网页时，整个 Vue 应用程序，包括根组件（通常是名为 App 的组件）都会重新初始化
      // immediate: true 是 watch 选项的一个属性，它的作用是让这个 watcher 在组件实例创建后立即执行一次，
      // 而不仅仅是在它观察的数据（在这个例子中是 $store.state.menu）发生变化时执行。
    }
  }
}
</script>

<style>
#app {
  height: 100%;
}
</style>
